<template>
	<view>
		<div class="baseInfo">
			<image class="singer-cover" :src="singerBaseInfo&&singerBaseInfo.picUrl" mode="aspectFill"></image>
			<span>{{singerBaseInfo.name}}</span>
			<span class="alias" v-for="(item,index) in singerBaseInfo.alias" :key="index">
				{{item}}
			</span>
			<p class="desc">{{singerBaseInfo.briefDesc}}</p>
		</div>
		<tabBar :tabList="tablist" @click="toogleTab"></tabBar>

		<musicList :musicArrayData="singSongsList" v-show="currentTabIndex===0">
			<p slot="title"></p>
		</musicList>

		<album-list v-show="currentTabIndex===1" :ablumListData="ablumListData"></album-list>
		<mv-list :mvListData="singerMv"  v-show="currentTabIndex===2" ></mv-list>
	</view>
</template>

<script>
	import tabBar from "../../components/tabbar.vue"
	import musicList from "../../components/music-list.vue"
	import albumList from "../../components/album-list.vue"
	import mvList from "../../components/mv-list.vue"
	export default {
		data() {
			return {
				singerBaseInfo: {},
				albumOffset: 0,
				albumOffsetLimit: 30,
				singSongsList: [], //歌手单曲
				ablumListData:[], //歌手专辑
				singerMv:{},//歌手mv
				currentTabIndex: 0,
				tablist: [{
						icon: '&#xe612;',
						text: '单曲',
						to: "/pages/Recommand/Recommand"
					},
					{
						icon: '&#xe623;',
						text: '专辑',
						to: "/pages/Hot/Hot",
					},
					{
						to: "/pages/Search/Search",
						icon: '&#xe6d2;',
						text: 'MV',
					},
					{
						to: "/pages/Search/Search",
						icon: '&#xe604;',
						text: '详情',
					}
				]
			}
		},
		components: {
			tabBar,
			musicList,
			albumList,
			mvList
		},
		
		methods: {
			async getSingerSongsList(id) {
				const res = await this.rq.fetchGet(this.apiUrl.singerSongs, {
					id,
				})
				this.singerBaseInfo = res[1].data.artist;
				this.singSongsList = res[1].data.hotSongs.map(item => {
					return {
						id: item.id,
						name: item.name,
						song: {
							exclusive: item.h,
							artists: item.ar,
							album: item.al
						}
					}
				})
			},
			async getAlbumList(id, albumOffset, albumOffsetLimit) {
				const res = await this.rq.fetchGet(this.apiUrl.singerAlbum, {
					id,
					offset: albumOffset ? albumOffset : 0,
					limit: albumOffsetLimit ? albumOffsetLimit : 30,
				})
				this.ablumListData = res[1].data.hotAlbums;
			},
			async getSingerMvs(id){
				const res = await this.rq.fetchGet(this.apiUrl.singerMv,{
					id,
				})
				this.singerMv = res[1].data
				console.log(this.singerMv )
			},
			toogleTab(index) {
				this.currentTabIndex = index;
			}
		},
		created() {
			this.getSingerSongsList(this.options.id)
			this.getAlbumList(this.options.id)
			this.getSingerMvs(this.options.id)
		}
	}
</script>

<style lang="scss">
	.baseInfo {

		.desc {
			color: lighten(gray, 8%);
			max-height: 5rem;
			font-size: .6rem;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			line-clamp: 3;
			-webkit-box-orient: vertical;
			margin: .6rem;
		}

		.singer-cover {
			width: 30vw;
			height: 30vw;
			border-radius: 50%;
			vertical-align: middle;
			margin: .6rem;
			box-shadow: 0px 0px 12px #000000;
		}
	}
</style>
